<template>
  <v-container id="login" fill-height tag="section">
    <v-row justify="center">
      <v-slide-y-transition appear>
        <base-material-card
          color="success"
          light
          max-width="100%"
          class="px-5 py-3"
        >
          <template v-slot:heading>
            <div class="text-center">
              <h1 class="display-2 font-weight-bold mb-2">用户登录</h1>
            </div>
          </template>
          <v-card-text class="text-center">
            <v-form ref="form">
              <v-text-field
                color="secondary"
                label="用户名..."
                prepend-icon="mdi-account"
                class="mt-10"
                v-model="userLogin.username"
                :rules="[(v) => !!v || '该项为必填项！']"
              />
              <v-text-field
                class="mb"
                color="secondary"
                label="密码..."
                prepend-icon="mdi-lock-outline"
                type="password"
                autocomplete="off"
                v-model="userLogin.password"
                :rules="[(v) => !!v || '该项为必填项！']"
              />
              <input
                type="hidden"
                v-model="userLogin.captchaCodeKey"
                style="width: 0; height: 0"
              />
              <div class="mb-8">
                <v-text-field
                  color="secondary"
                  label="验证码..."
                  prepend-icon="mdi-check-decagram"
                  v-model="userLogin.code"
                  :rules="[(v) => !!v || '该项为必填项！']"
                >
                  <template v-slot:append-outer>
                    <a href="javascript:void(0);" @click="reoladCaptcha()">
                      <v-img
                        :src="captchaCodeImg"
                        v-model="captchaCodeImg"
                        alt="验证码"
                        class="captcha-code-img"
                      >
                      </v-img>
                    </a>
                  </template>
                </v-text-field>
              </div>
              <pages-btn
                large
                color=""
                depressed
                class="v-btn--text success--text"
                :loading="loading"
                :disabled="loading"
                @click="submit()"
              >
                登录
              </pages-btn>
            </v-form>
          </v-card-text>
        </base-material-card>
      </v-slide-y-transition>
    </v-row>
  </v-container>
</template>

<style scoped>
.captcha-code-img {
  width: 132px;
  height: 26px;
  border: 1px solid #f6f6f6;
}
</style>
<script>
export default {
  name: "PagesLogin",
  components: {
    PagesBtn: () => import("./components/Btn"),
  },
  data: () => ({
    loading: false,
    userLogin: {
      username: "",
      password: "",
      captchaCodeKey: "",
      code: "",
    },
    captchaCodeImg: "",
  }),
  created() {
    // 绑定按键监听事件
    document.addEventListener("keydown", this.handleWatchEnter);
    this.getCaptcha("");
  },
  methods: {
    /**
     * 监听 Enter 按键事件
     */
    handleWatchEnter(e) {
      var key = window.event ? e.keyCode : e.which;
      if (key === 13) {
        this.submit();
      }
    },
    submit() {
      if (this.$refs.form.validate()) {
        this.loading = true;
        this.request
          .post("/api/login", this.userLogin)
          .then((res) => {
            this.$dialog.notify.success("你好，欢迎回来！", {
              position: "top-right",
              timeout: 1500,
            });
            setTimeout(() => {
              this.$router.push({ path: "/" });
            }, 1500);
          })
          .catch((error) => {
            //后端未启动或代理错误!
            // this.$dialog.notify.error("后端未启动或代理错误!", {
            //   position: "top-right",
            //   timeout: 2000,
            // });
          })
          .finally(() => {
            this.loading = false;
            this.reoladCaptcha();
          });
      }
    },
    /**
     * 获取验证码
     */
    getCaptcha(key) {
      var that = this;
      that.request
        .get("/api/auth/getCaptcha", { captchaCodeKey: key })
        .then((res) => {
          that.userLogin.captchaCodeKey = res.data.captchaCodeKey;
          that.captchaCodeImg = res.data.captchaCodeImg;
        });
    },
    /**
     * 刷新验证码
     */
    reoladCaptcha() {
      this.getCaptcha(this.userLogin.captchaCodeKey);
    },
  },
};
</script>
